<template>
  <div class="pc home">
    <div class="banner">
      <banner></banner>
      <div
        style="
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0px;
          left: 0px;
          background: transparent;
        "
      ></div>
      <div class="texts">
        <div class="t1">
          Delivering The Best<br />
          Global Payments <br />
          Experience
        </div>
        <div class="t2">
          Onta Network is payments in the age of <br />internet capital markets - bringing the
          <br />speed and interoperability of crypto to <br />payment infrastructure around the
          world.
        </div>
        <div class="t3">
          <img src="@/assets/svg/banner-1.png" alt="" />
        </div>
      </div>
      <div class="texts2">
        <div class="partners">Partners</div>
        <div class="icons">
          <img src="@/assets/svg/b-i-5.svg" alt="" />
          <img src="@/assets/svg/b-i-6.svg" alt="" />
          <img src="@/assets/svg/b-i-4.svg" alt="" />
          <img src="@/assets/svg/b-i-2.svg" alt="" />
          <img src="@/assets/svg/b-i-1.svg" alt="" />
          <img src="@/assets/svg/b-i-3.svg" alt="" />

          <img src="@/assets/svg/b-i-5.svg" alt="" />
          <img src="@/assets/svg/b-i-6.svg" alt="" />
          <img src="@/assets/svg/b-i-4.svg" alt="" />
          <img src="@/assets/svg/b-i-2.svg" alt="" />
          <img src="@/assets/svg/b-i-1.svg" alt="" />
          <img src="@/assets/svg/b-i-3.svg" alt="" />
        </div>
      </div>
    </div>
    <!-- 第二屏 -->
    <Services />
    <!-- 第三屏 -->
    <div class="con3-web" ref="targetElement">
      <div class="con-title">Onta Network Metrics</div>
      <div class="con-desc">
        <div>
          Explore Onta Network and view real time transaction data in the Onta Network Explorer
        </div>
      </div>
      <div class="datas">
        <div class="data">
          <div class="data-num">{{ thousandSplit(homeDataNum.totalTransactionNumber || 0) }}</div>
          <div class="data-desc">Total Transactions</div>
        </div>
        <div class="data">
          <div class="data-num">{{ thousandSplit(homeDataNum.totalMerchant || 0) }}</div>
          <div class="data-desc">Total Merchants</div>
        </div>
        <div class="data">
          <div class="data-num">{{ thousandSplit(homeDataNum.totalKycUser || 0) }}</div>
          <div class="data-desc">KYC’d Users</div>
        </div>
        <div class="data">
          <div class="data-num">{{ thousandSplit(homeDataNum.totalCountry || 0) }}</div>
          <div class="data-desc">Countries</div>
        </div>
      </div>
    </div>
    <!-- 第四屏 -->
    <div class="con4">
      <div class="con-title">FAQs</div>
      <div class="con-desc">
        <div>
          Explore commonly asked questions<br />
          about Onta Network
        </div>
      </div>
      <div class="con-btns">
        <div
          class="btn"
          :class="{ btnActive: faqSelect == 'customers' }"
          @click="changeSelect('customers')"
        >
          For Customers
        </div>
        <div
          class="btn"
          :class="{ btnActive: faqSelect == 'merchants' }"
          @click="changeSelect('merchants')"
        >
          For Merchants
        </div>
      </div>
      <div class="faqs">
        <div class="faq" v-for="(item, index) in faqsList" :key="index">
          <div class="left">
            <div class="faq-title" :class="{ active: item.open }">
              <div>{{ item.title }}</div>
              <div class="right" @click="openFaq(index)">
                <img v-show="item.open" class="opt" src="@/assets/svg/sub-r.svg" alt="" />
                <img v-show="!item.open" class="opt" src="@/assets/svg/add-r.svg" alt="" />
              </div>
            </div>
            <div class="faq-desc" :style="{ display: item.open ? 'block' : 'none' }">
              {{ item.desc }}
            </div>
          </div>
        </div>
        <!-- <div class="view-all">
          <img class="view-all-icon" src="@/assets/svg/view-all.svg" alt="" />
          <div class="view-all-text">View All</div>
        </div> -->
      </div>
    </div>
    <!-- 第五屏 -->
    <div class="con5">
      <Experience></Experience>
    </div>
  </div>
</template>

<script>
import Banner from '@/components/Banner/index.vue'
import Services from '@/components/Services/index.vue'
import Experience from '@/components/Experience/index.vue'
import { selectOfficialWebsiteHomePageDataDto } from '@/utils/api'
import { thousandSplit } from '@/utils/index'
import { getFaqs } from '@/utils/mock'

export default {
  name: 'WebHomePage',
  components: {
    Services,
    Banner,
    Experience
  },
  data() {
    return {
      thousandSplit,
      playLock: false,
      faqIndex: 0,
      faqSelect: 'customers',
      faqsList: getFaqs('customers'),

      homeDataNum: {}
    }
  },
  mounted() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          // 元素进入视图后执行的操作
          console.log('元素进入视图')
          this.play() // 调用数字自增动画函数
          observer.unobserve(this.$refs.targetElement) // 停止观察元素，防止重复触发
        }
      })
    })
    observer.observe(this.$refs.targetElement) // 开始观察元素

    selectOfficialWebsiteHomePageDataDto().then((res) => {
      console.log(res)
      if (res.code === '000000') {
        this.homeDataNum = res.data
      }
    })
  },
  methods: {
    changeSelect(type) {
      this.faqSelect = type
      if (type === 'customers') {
        this.faqsList = getFaqs('customers')
      } else {
        this.faqsList = getFaqs('merchants')
      }
    },
    play() {
      // 数字自增动画
      this.$nextTick(() => {
        const numList = document.querySelectorAll('.data-num')
        numList.forEach((item) => {
          let num = 0
          const targetNum = parseInt(item.innerText.replace(/,/g, ''))
          const timer = setInterval(() => {
            if (num >= targetNum) {
              clearInterval(timer)
            } else {
              num += Math.ceil(targetNum / 100)
              item.innerText = num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
            }
          }, 10)
        })
      })
    },

    // FAQ 点击事件
    openFaq(index) {
      this.faqsList.forEach((item, i) => {
        if (i === index) {
          item.open = !item.open
        } else {
          item.open = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('./index.less');
</style>
